j<template>
  <div class="h-6">
    <el-menu-item style="color:#000000" index="/homePage">
      主页
    </el-menu-item>
    <el-sub-menu index="2">
      <template #title><span style="font-size: 24px;padding: var(--el-menu-base-level-padding);">监控</span></template>
      <el-menu-item index="2-1">实时监控</el-menu-item>
      <el-menu-item index="2-2">查看历史监控</el-menu-item>
      <el-menu-item index="2-3">异常行为检测</el-menu-item>
      <el-menu-item index="2-4">人员识别</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="4">
      <template #title><span style="font-size: 24px;">警报</span></template>
      <el-menu-item index="4-1">查看历史警报</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="5">
      <template #title><span style="font-size: 24px;">人员管理</span></template>
      <el-menu-item index="5-1">管理白名单</el-menu-item>
      <el-menu-item index="5-2">管理黑名单</el-menu-item>
      <el-menu-item index="5-3">录入信息</el-menu-item>
    </el-sub-menu>


  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { accountStore } from '@/store/modules/user'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

let account =ref(accountStore().account)
</script>
<style scoped>
div{
  display: flex;
}
.el-sub-menu__title {
  display: flex;
  align-items: center;
  height: var(--el-menu-item-height);
  line-height: var(--el-menu-item-height);
  font-size: 24px;
  font-weight: bold;
  color: var(--el-menu-text-color);
  padding: 0 calc(var(--el-menu-base-level-padding) * 2);
  list-style: none;
  cursor: pointer;
  position: relative;
  transition: border-color var(--el-transition-duration), background-color var(--el-transition-duration), color var(--el-transition-duration);
  box-sizing: border-box;
  white-space: nowrap;
}

.el-sub-menu__title i.el-icon-arrow-down {
  font-size: 24px;
  margin-right: calc(var(--el-menu-base-level-padding) * 0.5);
}

.el-menu-item,
.el-submenu {
  font-size: 24px;
  padding: var(--el-menu-base-level-padding);
}

.el-menu-item i.el-icon-arrow-down,
.el-submenu i.el-icon-arrow-down {
  font-size: 20px;
  margin-left: auto;
}

.el-menu-item i.el-icon-arrow-right,
.el-submenu i.el-icon-arrow-right {
  font-size: 20px;
  margin-right: auto;
}

</style>